<template>
  <div class="user-manage">
    <a-flex gap="middle" vertical>
      <!-- 标题和新增按钮区 -->
      <a-flex justify="space-between" :align="'center'" class="header-section">
        <div class="page-title">
          <span class="title-text">用户列表</span>
          <span class="title-desc">管理系统用户及权限</span>
        </div>
        <a-button type="primary" :icon="h(PlusOutlined)" class="action-button" @click="handleAddUser">新增用户</a-button>
      </a-flex>

      <!-- 搜索区 -->
      <a-form :layout="'inline'" class="search-form">
        <a-form-item label="用户名">
          <a-input v-model:value="searchForm.username" placeholder="请输入用户名" allowClear />
        </a-form-item>
        <a-form-item label="角色">
          <a-select 
            v-model:value="searchForm.role" 
            style="min-width: 180px" 
            placeholder="请选择角色" 
            allowClear
          >
            <a-select-option :value="0">普通用户</a-select-option>
            <a-select-option :value="1">管理员</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-select 
            v-model:value="searchForm.status" 
            style="min-width: 180px" 
            placeholder="请选择状态" 
            allowClear
          >
            <a-select-option :value="1">正常</a-select-option>
            <a-select-option :value="0">禁用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="注册时间">
          <a-range-picker v-model:value="searchForm.dateRange" />
        </a-form-item>
        <a-form-item class="action-item">
          <a-space>
            <a-button type="primary" :icon="h(SearchOutlined)" class="search-button" @click="handleSearch">查询</a-button>
            <a-button :icon="h(ReloadOutlined)" @click="resetSearch">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 批量操作区 -->
      <a-flex justify="space-between" :align="'center'">
        <a-flex justify="space-between">
          <a-space>
            <a-button type="primary" :icon="h(CheckCircleOutlined)" class="action-button" @click="batchEnable">
              批量启用
            </a-button>
            <a-button
              type="primary"
              danger
              class="action-button"
              :icon="h(StopOutlined)"
              @click="batchDisable"
            >
              批量禁用
            </a-button>
            <a-button type="primary" danger :icon="h(DeleteOutlined)" class="action-button" @click="batchDelete">
              批量删除
            </a-button>
          </a-space>
        </a-flex>
        <div>
          <a-tooltip title="刷新数据">
            <a-button type="primary" shape="circle" class="refresh-button" @click="refreshData">
              <ReloadOutlined :spin="spin" />
            </a-button>
          </a-tooltip>
        </div>
      </a-flex>

      <!-- 表格区域 -->
      <a-card class="table-card" :bordered="false">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :pagination="pagination"
          :loading="tableLoading"
          @change="handleTableChange"
          :scroll="{ x: 'max-content' }"
          class="data-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === 1 ? 'success' : 'error'" class="status-tag">
                {{ record.status === 1 ? '正常' : '禁用' }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'role'">
              <a-tag :color="record.role === 1 ? 'blue' : 'default'" class="role-tag">
                {{ record.role === 1 ? '管理员' : '普通用户' }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <!-- 响应式操作按钮 -->
              <div class="action-container">
                <!-- 桌面端显示 -->
                <a-space class="desktop-actions">
                  <a-tooltip title="编辑">
                    <a-button
                      type="link"
                      size="small"
                      @click="handleEdit(record)"
                      class="action-link"
                    >
                      <EditOutlined />编辑
                    </a-button>
                  </a-tooltip>
                  <a-tooltip :title="record.status === 1 ? '禁用' : '启用'">
                    <a-button
                      type="link"
                      size="small"
                      :class="record.status === 1 ? 'action-link-danger' : 'action-link-success'"
                      @click="handleStatusChange(record)"
                    >
                      <template v-if="record.status === 1">
                        <StopOutlined />禁用
                      </template>
                      <template v-else>
                        <CheckCircleOutlined />启用
                      </template>
                    </a-button>
                  </a-tooltip>
                  <a-tooltip title="重置密码">
                    <a-button
                      type="link"
                      size="small"
                      class="action-link"
                      @click="handleResetPassword(record)"
                    >
                      <KeyOutlined />重置密码
                    </a-button>
                  </a-tooltip>
                  <a-popconfirm
                    title="确定要删除此用户吗？"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="handleDelete(record)"
                  >
                    <a-tooltip title="删除">
                      <a-button type="link" danger size="small" class="action-link">
                        <DeleteOutlined />删除
                      </a-button>
                    </a-tooltip>
                  </a-popconfirm>
                </a-space>

                <!-- 移动端显示下拉菜单 -->
                <div class="mobile-actions">
                  <a-dropdown :trigger="['click']">
                    <a-button size="small">
                      <EllipsisOutlined />
                    </a-button>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="edit" @click="handleEdit(record)">
                          <EditOutlined /> 编辑
                        </a-menu-item>
                        <a-menu-item
                          key="status"
                          @click="handleStatusChange(record)"
                          :style="{ color: record.status === 1 ? '#ff4d4f' : '#32cd32' }"
                        >
                          <template v-if="record.status === 1">
                            <StopOutlined /> 禁用
                          </template>
                          <template v-else>
                            <CheckCircleOutlined /> 启用
                          </template>
                        </a-menu-item>
                        <a-menu-item key="reset-password" @click="handleResetPassword(record)">
                          <KeyOutlined /> 重置密码
                        </a-menu-item>
                        <a-menu-item key="delete" danger @click="confirmDelete(record)">
                          <DeleteOutlined /> 删除
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </div>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-flex>

    <!-- 用户编辑对话框 -->
    <a-modal
      v-model:visible="editModalVisible"
      :title="editingUser.id ? '编辑用户' : '新增用户'"
      @ok="saveUser"
      @cancel="cancelEdit"
      :confirmLoading="submitLoading"
    >
      <a-form :model="editingUser" :rules="userFormRules" ref="userFormRef" layout="vertical">
        <a-form-item name="username" label="用户名" required>
          <a-input v-model:value="editingUser.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item name="email" label="邮箱" required>
          <a-input v-model:value="editingUser.email" placeholder="请输入邮箱" />
        </a-form-item>
        <a-form-item name="phone" label="手机号">
          <a-input v-model:value="editingUser.phone" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item name="role" label="角色" required>
          <a-select v-model:value="editingUser.role" placeholder="请选择角色">
            <a-select-option :value="0">普通用户</a-select-option>
            <a-select-option :value="1">管理员</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="status" label="状态" required>
          <a-select v-model:value="editingUser.status" placeholder="请选择状态">
            <a-select-option :value="1">正常</a-select-option>
            <a-select-option :value="0">禁用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="password" :label="editingUser.id ? '密码（不填则不修改）' : '密码'" :required="!editingUser.id">
          <a-input-password v-model:value="editingUser.password" placeholder="请输入密码" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 重置密码对话框 -->
    <a-modal
      v-model:visible="resetPasswordVisible"
      title="重置密码"
      @ok="confirmResetPassword"
      @cancel="cancelResetPassword"
      :confirmLoading="resetLoading"
    >
      <a-form :model="resetForm" ref="resetFormRef" layout="vertical">
        <a-form-item name="newPassword" label="新密码" :rules="[{ required: true, message: '请输入新密码' }]">
          <a-input-password v-model:value="resetForm.newPassword" placeholder="请输入新密码" />
        </a-form-item>
        <a-form-item name="confirmPassword" label="确认密码" :rules="[
          { required: true, message: '请确认密码' },
          { validator: validateConfirmPassword }
        ]">
          <a-input-password v-model:value="resetForm.confirmPassword" placeholder="请再次输入密码" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { h, ref, reactive, computed, onMounted } from 'vue'
import {
  PlusOutlined,
  CheckCircleOutlined,
  StopOutlined,
  DeleteOutlined,
  ReloadOutlined,
  SearchOutlined,
  EditOutlined,
  EllipsisOutlined,
  KeyOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { 
  banUser, 
  unBanUser, 
  getUserList, 
  addUser, 
  updateUser, 
  deleteUser, 
  resetPassword 
} from '@/api/user'

// 刷新按钮状态
const spin = ref(false)

// 表格相关数据
const tableLoading = ref(false)
const selectedRowKeys = ref([])
const dataSource = ref([
  {
    key: '1',
    id: 1,
    username: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138001',
    role: 1,
    createTime: '2023-04-01 12:00:00',
    status: 1,
  },
  {
    key: '2',
    id: 2,
    username: '李四',
    email: 'lisi@example.com',
    phone: '13800138002',
    role: 0,
    createTime: '2023-04-02 10:30:00',
    status: 0,
  },
  {
    key: '3',
    id: 3,
    username: '王五',
    email: 'wangwu@example.com',
    phone: '13800138003',
    role: 0,
    createTime: '2023-04-03 15:45:00',
    status: 1,
  },
  {
    key: '4',
    id: 4,
    username: '赵六',
    email: 'zhaoliu@example.com',
    phone: '13800138004',
    role: 0,
    createTime: '2023-04-04 09:20:00',
    status: 1,
  },
  {
    key: '5',
    id: 5,
    username: '钱七',
    email: 'qianqi@example.com',
    phone: '13800138005',
    role: 0,
    createTime: '2023-04-05 14:15:00',
    status: 0,
  },
])

// 在script部分添加日期格式化函数
/**
 * 格式化日期为 yyyy-MM-dd HH:mm:ss
 */
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 表格列定义
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
    fixed: 'left',
  },
  {
    title: '用户名',
    dataIndex: 'username',
    width: 120,
    ellipsis: true,
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    width: 180,
    ellipsis: true,
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    width: 130,
  },
  {
    title: '角色',
    dataIndex: 'role',
    key: 'role',
    width: 100,
  },
  {
    title: '注册时间',
    dataIndex: 'createTime',
    width: 180,
    sorter: true,
    customRender: ({ text }) => formatDate(text)
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 240,
  },
]

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 100,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条`,
})

// 搜索表单
const searchForm = reactive({
  username: '',
  role: undefined,
  status: undefined,
  dateRange: [],
})

// 编辑相关
const editModalVisible = ref(false)
const submitLoading = ref(false)
const editingUser = reactive({
  id: null,
  username: '',
  email: '',
  phone: '',
  role: 0,
  status: 1,
  password: '',
})
const userFormRef = ref(null)

// 重置密码相关
const resetPasswordVisible = ref(false)
const resetLoading = ref(false)
const resetForm = reactive({
  userId: null,
  newPassword: '',
  confirmPassword: '',
})
const resetFormRef = ref(null)

// 表单验证规则
const userFormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度必须在3-20个字符之间', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  password: [
    { 
      required: true, 
      message: '请输入密码', 
      trigger: 'blur',
      validator: (rule, value) => {
        // 新增用户时密码必填，编辑用户时可选
        if (!editingUser.id && !value) {
          return Promise.reject('请输入密码')
        }
        // 密码不为空时验证长度
        if (value && value.length < 6) {
          return Promise.reject('密码长度不能少于6个字符')
        }
        return Promise.resolve()
      }
    }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
}

// 验证确认密码
const validateConfirmPassword = (rule, value) => {
  if (value !== resetForm.newPassword) {
    return Promise.reject('两次输入的密码不一致')
  }
  return Promise.resolve()
}

// 表格相关方法
const onSelectChange = (keys) => {
  selectedRowKeys.value = keys
}

const handleTableChange = (pag, filters, sorter) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  
  // 如果有排序，更新排序字段
  if (sorter && sorter.field && sorter.order) {
    searchForm.sortField = sorter.field
    searchForm.sortOrder = sorter.order
  }
  
  // 加载数据
  fetchUserList()
}

// 获取用户列表数据
const fetchUserList = async () => {
  try {
    tableLoading.value = true
    
    // 构建查询参数
    const params = {
      current: pagination.current,
      pageSize: pagination.pageSize,
      username: searchForm.username || undefined,
      role: searchForm.role,
      status: searchForm.status
    }
    
    // 如果有日期范围，添加到查询参数
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.createTimeStart = searchForm.dateRange[0].toISOString()
      params.createTimeEnd = searchForm.dateRange[1].toISOString()
    }
    
    // 调用API获取数据
    const response = await getUserList(params)
    console.log(response);
    
    // 更新数据源和分页信息
    if (response) {
      dataSource.value = response.records.map(item => ({
        ...item,
        key: String(item.id)
      }))
      pagination.total = response.total
    }
  } catch (error) {
    message.error('获取用户列表失败：' + (error.message || '未知错误'))
  } finally {
    tableLoading.value = false
    spin.value = false
  }
}

// 刷新数据
const refreshData = () => {
  spin.value = true
  fetchUserList()
}

// 搜索相关方法
const handleSearch = async () => {
  try {
    pagination.current = 1 // 重置到第一页
    await fetchUserList()
    message.success('搜索成功')
  } catch (error) {
    message.error('搜索失败：' + (error.message || '未知错误'))
  }
}

const resetSearch = () => {
  // 重置搜索表单
  searchForm.username = ''
  searchForm.role = undefined
  searchForm.status = undefined
  searchForm.dateRange = []
  
  // 重新加载数据
  fetchUserList()
  message.success('搜索条件已重置')
}

// 批量操作方法
const batchEnable = async () => {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请选择要启用的用户')
    return
  }
  
  try {
    tableLoading.value = true
    
    // 批量调用API启用用户
    const promises = selectedRowKeys.value.map(key => {
      const user = dataSource.value.find(item => item.key === key)
      if (user && user.status === 0) {
        return unBanUser({ id: user.id })
      }
      return Promise.resolve()
    })
    
    await Promise.all(promises)
    message.success(`已启用 ${selectedRowKeys.value.length} 个用户`)
    
    // 更新本地数据
    dataSource.value.forEach(item => {
      if (selectedRowKeys.value.includes(item.key)) {
        item.status = 1
      }
    })
    
    // 清空选择
    selectedRowKeys.value = []
    
    // 刷新数据
    fetchUserList()
  } catch (error) {
    message.error('批量启用失败：' + (error.message || '未知错误'))
  } finally {
    tableLoading.value = false
  }
}

const batchDisable = async () => {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请选择要禁用的用户')
    return
  }
  
  try {
    tableLoading.value = true
    
    // 批量调用API禁用用户
    const promises = selectedRowKeys.value.map(key => {
      const user = dataSource.value.find(item => item.key === key)
      if (user && user.status === 1) {
        return banUser({ id: user.id })
      }
      return Promise.resolve()
    })
    
    await Promise.all(promises)
    message.success(`已禁用 ${selectedRowKeys.value.length} 个用户`)
    
    // 更新本地数据
    dataSource.value.forEach(item => {
      if (selectedRowKeys.value.includes(item.key)) {
        item.status = 0
      }
    })
    
    // 清空选择
    selectedRowKeys.value = []
    
    // 刷新数据
    fetchUserList()
  } catch (error) {
    message.error('批量禁用失败：' + (error.message || '未知错误'))
  } finally {
    tableLoading.value = false
  }
}

const batchDelete = async () => {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请选择要删除的用户')
    return
  }
  
  try {
    tableLoading.value = true
    
    // 批量调用API删除用户
    const promises = selectedRowKeys.value.map(key => {
      const user = dataSource.value.find(item => item.key === key)
      if (user) {
        return deleteUser({ id: user.id })
      }
      return Promise.resolve()
    })
    
    await Promise.all(promises)
    message.success(`已删除 ${selectedRowKeys.value.length} 个用户`)
    
    // 更新本地数据
    dataSource.value = dataSource.value.filter(item => !selectedRowKeys.value.includes(item.key))
    
    // 清空选择
    selectedRowKeys.value = []
    
    // 刷新数据
    fetchUserList()
  } catch (error) {
    message.error('批量删除失败：' + (error.message || '未知错误'))
  } finally {
    tableLoading.value = false
  }
}

// 行操作方法
const handleEdit = (record) => {
  // 复制用户数据到编辑表单
  Object.keys(editingUser).forEach(key => {
    // 只复制record中存在的字段
    if (key in record) {
      editingUser[key] = record[key]
    } else {
      // 对于record中不存在的字段，设置为undefined而不是空字符串
      editingUser[key] = undefined
    }
  })
  
  // 确保密码字段为空，编辑时不需要填写密码
  editingUser.password = ''
  
  // 显示编辑对话框
  editModalVisible.value = true
}

const handleStatusChange = async (record) => {
  tableLoading.value = true
  
  try {
    // 调用API修改用户状态
    if (record.status === 1) {
      // 禁用用户
      await banUser({ id: record.id })
      message.success('用户已禁用')
    } else {
      // 启用用户
      await unBanUser({ id: record.id })
      message.success('用户已启用')
    }
    
    // 更新本地数据
    const index = dataSource.value.findIndex((item) => item.id === record.id)
    if (index > -1) {
      dataSource.value[index].status = dataSource.value[index].status === 1 ? 0 : 1
    }
  } catch (error) {
    message.error('操作失败：' + (error.message || '未知错误'))
  } finally {
    tableLoading.value = false
  }
}

const handleResetPassword = (record) => {
  resetForm.userId = record.id
  resetForm.newPassword = ''
  resetForm.confirmPassword = ''
  resetPasswordVisible.value = true
}

const handleDelete = async (record) => {
  try {
    tableLoading.value = true
    
    // 调用API删除用户
    await deleteUser({ id: record.id })
    message.success('用户已删除')
    
    // 更新本地数据
    dataSource.value = dataSource.value.filter((item) => item.id !== record.id)
    
    // 重新加载数据
    fetchUserList()
  } catch (error) {
    message.error('删除失败：' + (error.message || '未知错误'))
  } finally {
    tableLoading.value = false
  }
}

const confirmDelete = (record) => {
  handleDelete(record)
}

// 编辑对话框相关方法
const saveUser = async () => {
  try {
    await userFormRef.value.validate()
    
    submitLoading.value = true
    
    // 根据是否有ID判断是新增还是编辑
    if (!editingUser.id) {
      // 新增用户
      const response = await addUser(editingUser)
      
      if (response) {
        message.success('用户添加成功')
        
        // 刷新数据
        fetchUserList()
      }
    } else {
      // 编辑用户
      // 创建一个新对象，避免直接修改editingUser
      const userToUpdate = { ...editingUser }
      
      // 移除所有空值字段，避免覆盖数据库中的值
      Object.keys(userToUpdate).forEach(key => {
        // 如果值为空字符串或null，从提交对象中删除该字段
        if (userToUpdate[key] === '' || userToUpdate[key] === null) {
          delete userToUpdate[key]
        }
      })
      
      const response = await updateUser(userToUpdate)
      
      if (response) {
        message.success('用户更新成功')
        
        // 刷新数据
        fetchUserList()
      }
    }
    
    // 关闭对话框
    editModalVisible.value = false
  } catch (error) {
    console.error('操作失败', error)
    message.error('操作失败：' + (error.message || '未知错误'))
  } finally {
    submitLoading.value = false
  }
}

const cancelEdit = () => {
  editModalVisible.value = false
  // 重置表单
  editingUser.id = null
  editingUser.username = ''
  editingUser.email = ''
  editingUser.phone = ''
  editingUser.role = 0
  editingUser.status = 1
  editingUser.password = ''
}

// 重置密码相关方法
const confirmResetPassword = async () => {
  try {
    await resetFormRef.value.validate()
    
    resetLoading.value = true
    
    // 调用API重置密码
    await resetPassword({
      userId: resetForm.userId,
      newPassword: resetForm.newPassword
    })
    
    message.success('密码重置成功')
    resetPasswordVisible.value = false
  } catch (error) {
    console.error('表单验证失败', error)
    message.error('密码重置失败：' + (error.message || '未知错误'))
  } finally {
    resetLoading.value = false
  }
}

const cancelResetPassword = () => {
  resetPasswordVisible.value = false
  resetForm.userId = null
  resetForm.newPassword = ''
  resetForm.confirmPassword = ''
}

// 点击新增用户按钮
const handleAddUser = () => {
  // 重置编辑表单
  editingUser.id = null
  editingUser.username = ''
  editingUser.email = ''
  editingUser.phone = ''
  editingUser.role = 0
  editingUser.status = 1
  editingUser.password = ''
  editingUser.avatar = ''
  editingUser.gender = null
  editingUser.birthDate = null
  
  // 显示对话框
  editModalVisible.value = true
}

// 页面加载时获取数据
onMounted(() => {
  fetchUserList()
})
</script>

<style lang="scss" scoped>
.user-manage {
  .header-section {
    margin-bottom: 16px;
  }

  .page-title {
    display: flex;
    flex-direction: column;

    .title-text {
      font-size: 20px;
      font-weight: 600;
      color: #262626;
      line-height: 1.4;
    }

    .title-desc {
      font-size: 14px;
      color: #8c8c8c;
      margin-top: 4px;
    }
  }

  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 8px 0;

    .action-item {
      margin-right: 0;
    }

    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
  }

  .table-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    :deep(.ant-card-body) {
      padding: 0;
    }
  }

  .action-button {
    border-radius: 4px;
    font-weight: 500;
    height: 32px;
    display: flex;
    align-items: center;
  }

  .search-button {
    background-color: #1890ff;

    &:hover,
    &:focus {
      background-color: #40a9ff;
    }
  }

  .refresh-button {
    transition: all 0.3s;

    &:hover {
      transform: rotate(180deg);
    }
  }

  .data-table {
    :deep(.ant-table-thead > tr > th) {
      background-color: #fafafa;
      font-weight: 600;
      padding: 12px 16px;
    }

    :deep(.ant-table-tbody > tr > td) {
      padding: 12px 16px;
    }

    :deep(.ant-table-tbody > tr:hover > td) {
      background-color: #e6f7ff;
    }

    :deep(.ant-table-row) {
      transition: all 0.3s;
    }

    :deep(.ant-pagination) {
      margin: 16px 0;
      padding: 0 16px;
    }
  }

  .status-tag, .role-tag {
    min-width: 60px;
    text-align: center;
    border-radius: 4px;
  }

  .action-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
  }

  .action-link-danger {
    color: #ff4d4f;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;

    &:hover {
      color: #ff7875;
    }
  }

  .action-link-success {
    color: #52c41a;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;

    &:hover {
      color: #73d13d;
    }
  }

  // 响应式操作按钮样式
  .action-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-actions {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .desktop-actions {
      display: none;
    }

    .mobile-actions {
      display: block;
    }

    .search-form {
      gap: 8px 16px;
    }
  }

  @media screen and (max-width: 576px) {
    .header-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .title-desc {
      display: none;
    }
  }
}
</style> 